<template>
  <div class="area_list">
    <div class="area_item w100">
      <dv-border-box-12 class="w100 h-full">
        <div class="w100 flex-x" style="margin-bottom: 10px;">
          <div
            v-for="it in list123"
            :key="it.name"
            class="flex-y flex-center h-full"
            style="width: 20%"
          >
            <img :src="it.imgUrl" class="it_icon" alt="" />
            <div style="font-size: 14px">{{ it.name }}</div>
          </div>
        </div>
        <div
          v-for="(item, index) in list123Data.splice(0, tempAreaCount)"
          :key="index"
          style="height: 20%;"
          class="flex-x flex-center"
        >
          <div class="flex-x w100 ar_name_box">
            <div class="ar_name">
              {{ index + 1 }}
            </div>
            <div
              v-for="it in item.list"
              :key="it.id"
              style="width: 20%"
              class="flex-x flex-center"
            >
              <!-- v-if="it.state" -->
              <!-- v-if="!isNaN(it.val.number[0])" -->
              <dv-digital-flop
                v-if="!isNaN(it.val.number[0])"
                :key="it.id"
                :config="it.val"
                style="width: 100%; height: 20px"
              />
              <div v-else class="" style="color: #00e9fe">--</div>
            </div>
          </div>
        </div>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
import { generateId } from "@/utils";
import MyTitle from "./DTitle.vue";
import { mapGetters } from "vuex";
export default {
  components: { MyTitle },
  props: {
    // 显示几个温区的
    number: {
      type: [Number, String],
      default: 1
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["area123", "deviceTempAreaCount"]),
    tempAreaCount() {
      return this.deviceTempAreaCount || 1;
    },
    list123Data() {
      // transfeHeat false停止送热true送热
      const {
        meter1AlmControlTemp,
        meter1ControlTemp,
        meter1PoutPercent,
        meter1AlmRealTemp,
        meter1RealTemp,
        transfeHeat1,

        meter2AlmControlTemp,
        meter2ControlTemp,
        meter2PoutPercent,
        meter2AlmRealTemp,
        meter2RealTemp,
        transfeHeat2,

        meter3AlmControlTemp,
        meter3ControlTemp,
        meter3PoutPercent,
        meter3AlmRealTemp,
        meter3RealTemp,
        transfeHeat3
      } = this.area123;
      return [
        {
          areaName: "一区",
          transfeHeat: transfeHeat1,
          list: [
            {
              name: "实际温度",
              id: generateId(),
              state: meter1RealTemp,
              val: {
                number: [Number(meter1RealTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                  // textAlign: "start",
                  // fillText: "textAlign=start",
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/wenduicon.png")
            },
            {
              name: "控制温度",
              id: generateId(),
              val: {
                number: [Number(meter1ControlTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/wenduicon2.png")
            },
            {
              name: "功率输出",
              id: generateId(),
              val: {
                number: [Number(meter1PoutPercent)],
                content: "{nt}%",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/wenduicon3.png")
            },
            {
              name: "报警表测量温度",
              id: generateId(),
              val: {
                number: [Number(meter1AlmRealTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/wenduicon4.png")
            },
            {
              name: "报警表控制温度",
              id: generateId(),
              val: {
                number: [Number(meter1AlmControlTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/wenduicon5.png")
            }
          ]
        },
        {
          areaName: "二区",
          transfeHeat: transfeHeat2,
          state: meter2RealTemp,
          list: [
            {
              name: "实际温度",
              id: generateId(),
              val: {
                number: [Number(meter2RealTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_1.png")
            },
            {
              name: "控制温度",
              id: generateId(),
              val: {
                number: [Number(meter2ControlTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_2.png")
            },
            {
              name: "功率输出",
              id: generateId(),
              val: {
                number: [Number(meter2PoutPercent)],
                content: "{nt}%",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_3.png")
            },

            {
              name: "报警表测量温度",
              id: generateId(),
              val: {
                number: [Number(meter2AlmRealTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_4.png")
            },
            {
              name: "报警表控制温度",
              id: generateId(),
              val: {
                number: [Number(meter2AlmControlTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_4.png")
            }
          ]
        },
        {
          areaName: "三区",
          transfeHeat: transfeHeat3,
          state: meter3RealTemp,
          list: [
            {
              name: "实际温度",
              id: generateId(),
              val: {
                number: [Number(meter3RealTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_1.png")
            },
            {
              name: "控制温度",
              id: generateId(),
              val: {
                number: [Number(meter3ControlTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_2.png")
            },
            {
              name: "功率输出",
              id: generateId(),
              val: {
                number: [Number(meter3PoutPercent)],
                content: "{nt}%",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_3.png")
            },
            {
              name: "报警表测量温度",
              id: generateId(),
              val: {
                number: [Number(meter3AlmRealTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_4.png")
            },
            {
              name: "报警表控制温度",
              id: generateId(),
              val: {
                number: [Number(meter3AlmControlTemp)],
                content: "{nt}℃",
                toFixed: 1,
                textAlign: "center",
                style: {
                  fontSize: 18
                }
              },
              imgUrl: require("@/assets/images/shebeiIcon/123qu_4.png")
            }
          ]
        }
      ];
    },
    list123() {
      // transfeHeat false停止送热true送热

      return [
        {
          name: "实际温度",
          imgUrl: require("@/assets/images/shebeiIcon/wenduicon.png")
        },
        {
          name: "控制温度",
          imgUrl: require("@/assets/images/shebeiIcon/wenduicon2.png")
        },
        {
          name: "功率输出",
          imgUrl: require("@/assets/images/shebeiIcon/wenduicon3.png")
        },
        {
          name: "报警表测量温度",
          imgUrl: require("@/assets/images/shebeiIcon/wenduicon4.png")
        },
        {
          name: "报警表控制温度",
          imgUrl: require("@/assets/images/shebeiIcon/wenduicon5.png")
        }
      ];
    }
  }
};
</script>

<style lang="scss" scoped>
/* 定义 */

.ar_name_box {
  position: relative;

  .ar_name {
    position: absolute;
    left: 16px;
    top: 0;
    background-color: #0dcbe9;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 16px;
    width: 16px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
  }
}

//使用
.number {
  display: inline-block;
  // font-family: "digital-7";
}

.area_list {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .it_icon {
    width: 70%;
    // height: 53px;
  }

  .item_val_state {
    height: 14px;
    width: 30%;
    padding-right: 2px;
    border-radius: 3px;
    // box-shadow: 3px 3px 12px #c0c0c0;
  }

  .area_item {
    position: relative;

    // padding: 20px;
    /* background-size: contain; */
    /deep/ .border-box-content {
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .area_status {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 14px;

      .state_box {
        margin-left: 6px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background-color: #00fafd;
      }
    }

    .area_item_box {
      padding: 15px 10px 10px 10px;
      z-index: 999;
      height: 100%;

      .area_item_box_top_title {
        margin-bottom: 10px;

        .state_title {
          font-size: 14px;
        }
      }

      .number_val_box_list {
        padding: 6px;
        height: 80%;
      }
    }

    .number_val_box {
      width: 100%;

      // margin-bottom: 10px;
      .item_title {
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: space-between;
        /* line-height: 22px; */

        .item_val {
          text-align: right;
          padding-right: 2px;
          width: 100%;
          /* height: 22px; */
          margin-left: 12px;
          font-size: 16px;
          color: #00e9fe;
        }

        .item_num {
          font-size: 15px;
          white-space: nowrap;
          // width: 150px;
          // min-width: 150px;
        }

        .state_number {
          color: #ff4d4f;
        }
      }
    }

    .title {
      font-size: 18px;
      margin-bottom: 6px;
    }
  }
}
</style>
